<template>
  <!-- 培训情况 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="培训类型" prop="category">
        <el-select
          v-model="queryParams.category"
          placeholder="培训类型"
          clearable
          size="small"
          style="width: 240px"
          @change="handleQuery"
        >
          <el-option
            v-for="dict in cateOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="培训班组" prop="shiftId">
        <el-select
          v-model="queryParams.shiftId"
          placeholder="培训班组"
          clearable
          size="small"
          style="width: 240px"
          @change="handleQuery"
        >
          <el-option
            v-for="dict in deptOptions"
            :key="dict.theid"
            :label="dict.title"
            :value="dict.theid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="培训时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="selectTime"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入培训标题"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
          size="small"
        />
      </el-form-item>
      <el-form-item label="发布状态" prop="releaseStatus">
        <!-- v-model="queryParams.releaseStatus" -->
        <el-switch
          v-model="releas"
          :active-value="1"
          :inactive-value="0"
          @change="changeStatus"
        ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['31310']"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getRefresh"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableList" :border="true">
      <el-table-column label="培训类型" prop="typeVal" align="center" />
      <el-table-column label="培训名称" prop="title" align="center" />
      <el-table-column
        label="课程名称"
        prop="curriculum"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span @click="handleCourse(scope.row)" class="active">
            {{ scope.row.curriculum }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="课程课时" prop="classHours" align="center" />
      <el-table-column
        label="班组名称"
        prop="shift"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span @click="handleTeam(scope.row)" class="active">
            {{ scope.row.shift }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="培训人数" prop="personnelNum" align="center" />
      <el-table-column
        label="考试名称"
        prop="examTask"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span @click="handleTest(scope.row)" class="active">
            {{ scope.row.examTask }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="考试状态" align="center" key="examination">
        <template slot-scope="scope">
          <span v-if="scope.row.examination === 0">否</span>
          <span v-if="scope.row.examination === 1">是</span>
        </template>
      </el-table-column>
      <el-table-column
        label="培训时间"
        prop="startTime"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }} - {{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="课程状态" key="theState" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.theState === 1">正在上课</span>
          <span v-if="scope.row.theState === 2">等待上课</span>
          <span v-if="scope.row.theState === 3">已结束</span>
          <span v-if="scope.row.theState === 4">异常数据</span>
        </template>
      </el-table-column>
      <el-table-column label="发布人" prop="publisher" align="center" />
      <el-table-column label="发布时间" prop="releaseTime" align="center" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.releaseStatus === 0"
            size="mini"
            type="text"
            v-hasPermi="['31320']"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            v-if="scope.row.releaseStatus === 0"
            size="mini"
            type="text"
            v-hasPermi="['31330']"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <!-- <el-button size="mini" type="text" @click="generateCode(scope.row)"
            >二维码</el-button
          > -->
          <!-- "releaseStatus": 1, //发布情况 0-待发布 1-已发布 (发布状态) -->
          <el-button
            v-if="scope.row.releaseStatus === 0"
            size="mini"
            type="text"
            @click="handleRelease(scope.row)"
            >发布</el-button
          >
          <el-button
            v-if="scope.row.releaseStatus === 1"
            size="mini"
            type="text"
            @click="Unpublish(scope.row)"
            >取消发布</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加/修改 -->
    <el-dialog :title="title" :visible.sync="open" width="640px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="培训名称" prop="title">
              <el-input v-model="form.title" placeholder="请输入培训名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程名称" prop="curriculumId">
              <el-select
                v-model="form.curriculumId"
                placeholder="课程名称"
                clearable
                size="small"
                @change="changeCourse"
              >
                <el-option
                  v-for="item in courseName"
                  :key="item.theid"
                  :label="item.title"
                  :value="item.theid"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="培训班组" prop="shiftId">
              <el-select
                v-model="form.shiftId"
                placeholder="培训班组"
                clearable
                size="small"
                @change="changeTeam"
              >
                <el-option
                  v-for="item in deptOptions"
                  :key="item.theid"
                  :label="item.title"
                  :value="item.theid"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训考试" prop="examination">
              <el-radio-group
                v-model="form.examination"
                @change="changeRadio($event)"
              >
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="培训机构" prop="shiftId">
              <el-select
                v-model="form.shiftId"
                placeholder="培训机构"
                clearable
                size="small"
                @change="changeTeam"
              >
                <el-option
                  v-for="item in deptOptions"
                  :key="item.theid"
                  :label="item.title"
                  :value="item.theid"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="考试分类" prop="examModeId">
              <el-select
                v-model="form.examModeId"
                placeholder="考试分类"
                clearable
                size="small"
                @change="changeExamMode"
                :disabled="form.examination === 0"
              >
                <el-option
                  v-for="item in examOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试名称" prop="examTaskId">
              <el-select
                v-model="form.examTaskId"
                placeholder="考试名称"
                clearable
                size="small"
                @change="changeExamName"
                :disabled="form.examination === 0"
              >
                <el-option
                  v-for="item in TestNames"
                  :key="item.theid"
                  :label="item.title"
                  :value="item.theid"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="培训学时" prop="examTaskId">
              <el-input
                v-model="form.classHours"
                placeholder="请输入培训学时"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训学分" prop="examTaskId">
              <el-input v-model="form.credit" placeholder="请输入培训学分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="培训时间" prop="startTime">
          <el-date-picker
            v-model="dateRange2"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="培训封面" prop="thePic">
          <uploadImage v-model="form.thePic" />
        </el-form-item>
        <el-form-item label="培训须知" prop="instructions">
          <editor v-model="form.instructions" :min-height="192" />
        </el-form-item>
        <el-form-item label="签到须知" prop="signinInstructions">
          <editor v-model="form.signinInstructions" :min-height="192" />
        </el-form-item>
        <el-form-item label="签退须知" prop="signoutInstructions">
          <editor v-model="form.signoutInstructions" :min-height="192" />
        </el-form-item>
        <h3>关联培训计划：</h3>
        <el-form-item label="培训类型" prop="typeId">
          <el-select
            v-model="form.typeId"
            placeholder="培训类型"
            size="small"
            @change="changeCate"
          >
            <el-option
              v-for="item in cateOptions"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="培训计划" prop="trainingplanId">
          <el-select
            v-model="form.trainingplanId"
            placeholder="培训计划"
            clearable
            size="small"
            @change="changePlan"
          >
            <el-option
              v-for="item in trainPlan"
              :key="item.theid"
              :label="item.title"
              :value="item.theid"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 点击课程名称，显示课程内容明细 -->
    <el-dialog
      title="课程内容明细"
      :visible.sync="openCourse"
      width="800px"
      append-to-body
    >
      <div style="width: 600px">
        <el-form ref="formCourse" :model="formCourse" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="课程封面" prop="thePic">
                <uploadImage v-model="formCourse.thePic" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="课程分类" prop="classification">
                <el-input v-model="formCourse.classification" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程名称" prop="title">
                <el-input v-model="formCourse.title" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="培训学时" prop="classHours">
                <el-input v-model="formCourse.classHours" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训学分" prop="credit">
                <el-input v-model="formCourse.credit" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="课程介绍" prop="introduce">
                <el-input v-model="formCourse.introduce" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="课程任务分类"
                prop="typeVal"
                label-width="100px"
              >
                <el-input v-model="formCourse.typeVal" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <el-table
        v-loading="CourseLoading"
        :data="CourseDetails"
        :border="true"
        max-height="600px"
      >
        <el-table-column
          label="标题"
          prop="title"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="类型"
          prop="theType"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.theType === 1">富文本文章</span>
            <span v-if="scope.row.theType === 2">视频文件</span>
            <span v-if="scope.row.theType === 3">网络视频</span>
            <span v-if="scope.row.theType === 4">pdf</span>
            <span v-if="scope.row.theType === 5">ppt</span>
            <span v-if="scope.row.theType === 6">word</span>
            <span v-if="scope.row.theType === 7">mp3</span>
            <span v-if="scope.row.theType === 8">wav</span>
          </template>
        </el-table-column>
        <el-table-column
          label="时长"
          prop="duration"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="学时"
          prop="classHours"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="学分"
          prop="credit"
          align="center"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <!-- <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      /> -->
    </el-dialog>

    <!-- 点击班组人数，显示班组人员明细 -->
    <el-dialog
      title="班组人员明细"
      :visible.sync="openTeam"
      width="800px"
      append-to-body
    >
      <el-table
        v-loading="loading2"
        :data="crewOptions"
        :border="true"
        max-height="600px"
      >
        <el-table-column
          label="姓名"
          prop="fullName"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          prop="department"
          align="center"
          :show-overflow-tooltip="true"
          v-if="ispeople == 1"
        />
        <el-table-column
          label="工作单位"
          prop="workUnit"
          align="center"
          :show-overflow-tooltip="true"
          v-if="ispeople == 2"
        />
        <el-table-column
          label="工种"
          prop="workType"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="岗位"
          prop="post"
          align="center"
          :show-overflow-tooltip="true"
          v-if="ispeople == 1"
        />
        <el-table-column label="发布状态" align="center" key="sendStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.sendStatus === 0">待发布</span>
            <span v-if="scope.row.sendStatus === 1">已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="消息读取" align="center" key="reviewStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.reviewStatus === 0">未读</span>
            <span v-if="scope.row.reviewStatus === 1">已读</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="crewtotal > 0"
        :total="crewtotal"
        :page.sync="peoplequeryParams.currentPage"
        :limit.sync="peoplequeryParams.pageSize"
        @pagination="getCrews"
      />
    </el-dialog>

    <!-- 点击发布开关，显示培训任务发布 -->
    <el-dialog
      title="培训任务发布"
      :visible.sync="openPublish"
      width="500px"
      append-to-body
    >
      <div style="width: 400px">
        <el-form
          ref="formPublish"
          :model="formPublish"
          label-width="80px"
          :rules="rules"
        >
          <el-form-item label="发布时间" prop="reviewTime">
            <el-date-picker
              v-model="formPublish.reviewTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPublish">确 定</el-button>
        <el-button @click="cancelPublish">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 生成二维码 -->
    <el-dialog
      :title="title"
      :visible.sync="open6"
      append-to-body
      width="400px"
    >
      <div
        style="
          width: 200px;
          height: 200px;
          border: 1px solid #000000;
          margin: 0 auto;
        "
      >
        <img
          :src="qrcode"
          alt=""
          style="width: 100%; height: 100%"
          id="qrcode"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="downloadCodeImg">下载</el-button> -->
      </div>
    </el-dialog>

    <!-- 导出名单 -->
    <el-dialog :title="title" :visible.sync="open7" append-to-body>
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导出名单</el-button
      >
      <div
        style="margin-top:30px;margin-bottom:30px;background:#DCDFE6;padding:15px; 0"
      >
        人员名单
      </div>
      <el-form
        ref="form1"
        :model="form1"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-form-item label="培训时间" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="培训时间" />
        </el-form-item>
        <el-form-item label="班组名称" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="班组名称" />
        </el-form-item>
        <el-form-item label="老师" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="老师" />
        </el-form-item>
        <el-form-item label="课程名称" prop="tableList">
          <el-input v-model="form1.tableList" placeholder="课程名称" />
        </el-form-item>
      </el-form>
      <div style="margin-top:30px;background:#DCDFE6;padding:15px; 0">
        名单详情
      </div>
      <el-table v-loading="loading" :data="tableList" :border="true">
        <el-table-column label="工号" prop="userId" align="center" />
        <el-table-column
          label="姓名"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          prop="tableList"
          align="center"
          el-table-column
        />
        <el-table-column label="签到时间" prop="roleSort" align="center" />
        <el-table-column
          label="签字"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 导出成绩表 -->
    <el-dialog :title="title" :visible.sync="open8" append-to-body>
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导成绩表</el-button
      >
      <div
        style="margin-top:30px;margin-bottom:30px;background:#DCDFE6;padding:15px; 0"
      >
        个人名单
      </div>
      <el-form
        ref="form2"
        :model="form2"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-form-item label="培训时间" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="培训时间" />
        </el-form-item>
        <el-form-item label="班组机构" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="班组名称" />
        </el-form-item>
        <el-form-item label="培训内容" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="老师" />
        </el-form-item>
        <el-form-item label="培训管理" prop="tableList">
          <el-input v-model="form2.tableList" placeholder="课程名称" />
        </el-form-item>
      </el-form>
      <div style="margin-top:30px;background:#DCDFE6;padding:15px; 0">
        名单详情
      </div>
      <el-table v-loading="loading" :data="tableList" :border="true">
        <el-table-column label="工号" prop="userId" align="center" />
        <el-table-column
          label="姓名"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          prop="tableList"
          align="center"
          el-table-column
        />
        <el-table-column label="学习时长" prop="tableList" align="center" />
        <el-table-column
          label="考核情况"
          prop="tableList"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import UploadImage from "@/components/ImageUpload";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Editor from "@/components/Editor";

import {
  getPage,
  listData,
  getData,
  delData,
  addData,
  updateData,
  delMultiData,
  getSelect,
  getTeam,
  getEnable,
  TestName, // 考试名称
  getrainPlan,
  getCoursename,
  getcourseData,
  getCrew,
  getPublish,
  getUnPublish,
} from "@/api/trainAdmin/trainAct";
import { getInstitutions, getDepartment, getDict } from "@/api/select";
export default {
  name: "trainAct",
  data() {
    return {
      crewOptions: [],
      courseKindes: [], // 课程分类
      TestNames: [], // 考试名称
      courseName: [], // 课程名称
      trainPlan: [], // 培训计划
      cateOptions: [], //培训分类
      levelOptions: [], //培训级别
      placeOptions: [], //培训地点
      modeOptions: [], //培训方式
      examOptions: [], //考试方式
      deptOptions: [], //培训部门
      CourseDetails: [], // 课程明细
      release: {
        theid: undefined,
        reviewerId: this.$store.state.userInfo.theid,
      },
      CourseLoading: true,
      disflag: true,
      dateRange2: [],
      releas: undefined,
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        category: undefined, //培训分类 id
        theid: undefined,
        trainMode: undefined, //培训方式 id
        examMode: undefined, //考试方式 id
        trainLevel: undefined, //培训级别 id
        trainPlace: undefined, //培训地点 id
        department: undefined, //培训部门 id
        startTime: undefined, // 开始时间
        endTime: undefined, // 结束时间
        keywords: undefined,
        releaseStatus: this.releas, // 发布情况
      },
      // 班组人员明细
      peoplequeryParams: {
        currentPage: 1,
        pagesize: 10,
        theid: undefined,
      },
      ispeople: "",
      dateRange: [],
      showSearch: true,
      loading: true,
      tableList: [],
      ids: [],
      single: true,
      multiple: true,
      total: 0,
      crewtotal: 0,
      title: "",
      open: false,
      form: {},
      rules: {
        status: [
          { required: true, message: "请选择课程分类", trigger: "change" },
        ],
        title: [
          { required: true, message: "培训名称不能为空", trigger: "blur" },
        ],
        shiftId: [
          { required: true, message: "请选择培训班组", trigger: "change" },
        ],
        examination: [
          { required: true, message: "请选择培训考试", trigger: "change" },
        ],
        // examModeId: [
        //   { required: true, message: "请选择考试分类", trigger: "change" },
        // ],
        status: [
          { required: true, message: "请选择考试名称", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择培训时间", trigger: "change" },
        ],
        typeId: [
          { required: true, message: "请选择培训类型", trigger: "change" },
        ],
        thePic: [
          { required: true, message: "封面不能为空", trigger: "change" },
        ],
      },
      openCourse: false,
      formCourse: {
        // name: "ccc",
        classification: undefined, // 课程分类
        title: undefined, // 课程名称
        introduce: undefined, // 介绍
        classHours: undefined, //课程学时
        credit: undefined, //课程学分
        typeVal: undefined, // 课程类型
        thePic: undefined,
      },
      qrcode: "",
      openTeam: false,
      loading2: true,
      tableList2: [],
      // 培训任务发布
      openPublish: false,
      formPublish: {
        reviewerId: this.$store.state.userInfo.theid,
        reviewer: this.$store.state.userInfo.thename,
      },
      textPublish: "",

      open3: false,
      open4: false,
      open5: false,
      open6: false,
      open7: false,
      open8: false,
      // 表单参数

      form1: {
        tableList: null,
      },
      form2: {
        tableList: null,
      },
      statusOptions: [],
      dataimg: "../../assets/img/bg1.png",
    };
  },
  components: {
    Treeselect,
    UploadImage,
    Editor,
  },
  created() {
    this.getList();
    this.getSelect();
    this.getTeamList();
    this.getTestName();
    this.getrainPlan();
    this.getCoursename();
    getDict(17, 0).then((response) => {
      //17-课程分类
      this.courseKindes = response.result.data;
      // console.log(this.courseKindes);
    });
    getDict(20, 0).then((response) => {
      //20-培训类型
      this.cateOptions = response.result.data;
    });
  },
  mounted() {},
  methods: {
    changeStatus() {
      this.queryParams.releaseStatus = this.releas;
      this.handleQuery();
    },
    // 培训时间
    selectTime(val) {
      console.log(!val);
      if (val) {
        this.handleQuery();
      } else {
        this.queryParams.startTime = undefined;
        this.queryParams.endTime = undefined;
        this.handleQuery();
      }
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      console.log(this.queryParams.releaseStatus);
      // console.log(1);
      // if (this.queryParams.releaseStatus) {
      //   this.queryParams.releaseStatus = undefined;
      // }
      this.getList();
    },
    // 刷新
    getRefresh() {
      this.queryParams.releaseStatus = undefined;
      this.getList();
    },
    // 操作按钮二维码
    generateCode(row) {
      this.open6 = true;
      this.qrcode = row.signIn;
    },
    getList() {
      this.loading = true;
      if (this.dateRange != null) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      }
      listData(this.queryParams).then((response) => {
        this.tableList = response.result.rows;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    getSelect() {
      getSelect().then((response) => {
        // this.cateOptions = response.result.trainCategory; //培训分类
        this.levelOptions = response.result.trainLevel; //培训级别
        this.placeOptions = response.result.trainPlace; //培训地点
        this.modeOptions = response.result.trainMode; //培训方式
        this.examOptions = response.result.examMode; //考试方式
      });
    },
    // 课程名称 下拉
    getCoursename() {
      getCoursename(this.queryParams).then((response) => {
        this.courseName = response.result.rows;
      });
    },
    // 培训班组下拉
    getTeamList() {
      getTeam(this.queryParams).then((response) => {
        this.deptOptions = response.result.rows;
        console.log(this.deptOptions);
      });
    },
    // 考试名称 下拉
    getTestName() {
      TestName(this.queryParams).then((response) => {
        // console.log(response);
        let arr = this.TestNames.concat(response.result.rows);
        this.TestNames = this.unique(arr);
      });
    },
    // 数组去重
    unique(arr) {
      // 利用对象访问属性的方法，判断对象中是否存在key
      var result = [];
      var obj = {};
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i].theid]) {
          result.push(arr[i]);
          obj[arr[i].theid] = true;
        }
      }
      return result;
    },
    // 培训计划 下拉
    getrainPlan() {
      getrainPlan(this.queryParams).then((response) => {
        this.trainPlan = response.result.rows;
      });
    },

    resetQuery() {
      this.dateRange = [];

      this.resetForm("queryForm");
      this.queryParams.releaseStatus = undefined;
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    handleUpdate(row) {
      this.reset();
      const theId = row.theid;
      getData(theId).then((response) => {
        this.form = response.result;
        this.$set(this.dateRange2, 0, response.result.startTime);
        this.$set(this.dateRange2, 1, response.result.endTime);
        if (response.result.examModeId == 0) {
          this.form.examModeId = "";
          this.form.examTaskId = "";
        }

        this.open = true;
        this.title = "修改";
      });
    },
    submitForm() {
      // console.log("this.form", this.form);
      if (this.dateRange2 != null) {
        this.form.startTime = this.dateRange2[0];
        this.form.endTime = this.dateRange2[1];
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.theid != undefined) {
            updateData(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.queryParams.releaseStatus = undefined;
              this.getList();
            });
          } else {
            addData(this.form).then((response) => {
              this.msgSuccess("添加成功");
              this.open = false;
              this.queryParams.releaseStatus = undefined;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        title: undefined,
        curriculumId: undefined, //培训课程 id
        curriculum: undefined, //培训课程
        shiftId: undefined, //培训班组 id
        shift: undefined, //培训班组
        examination: 0,
        examModeId: undefined, //考试方式 id
        personnelNum: undefined, // 参加培训人数
        examMode: undefined, //考试方式
        examTaskId: undefined, //考试任务id
        examTask: undefined, //考试任务
        typeId: undefined, //培训类型 id
        typeVal: undefined, //培训类型
        trainingplanId: undefined, //培训计划 id
        trainingplan: undefined, //培训计划
        startTime: undefined, //培训开始时间
        endTime: undefined, //培训结束时间
        classHours: undefined, //培训课时
        credit: undefined, //培训学分
        signinInstructions: undefined, //签到须知
        signoutInstructions: undefined, //签退须知
        instructions: undefined, //培训须知
        thePic: undefined,
      };
      if (this.cateOptions.length > 0) {
        this.form.typeId = this.cateOptions[0].id;
        this.form.typeVal = this.cateOptions[0].label;
      }
      this.disflag = true;
      this.dateRange2 = [];
      this.resetForm("form");
    },
    handleDelete(row) {
      const theId = row.theid || this.ids;
      this.$confirm('是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口
          return delData(theId);
        })
        .then(() => {
          this.queryParams.releaseStatus = undefined;
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    resetRelease() {
      this.openPublish = {
        theid: undefined, //id
        reviewerId: this.$store.state.userInfo.theid,
        reviewer: this.$store.state.userInfo.thename,
        reviewTime: "",
      };
    },
    // 发布
    handleRelease(row) {
      console.log(row);
      this.openPublish = true;
      this.formPublish.theid = row.theid;
      console.log(this.formPublish.theid);
    },
    Unpublish(row) {
      const theid = row.theid || this.ids;
      this.$confirm("是否确认取消发布?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口
          return getUnPublish(theid);
        })
        .then(() => {
          this.queryParams.releaseStatus = undefined;
          this.getList();
          this.msgSuccess("取消成功");
        });
    },
    handleStatusChange1(row) {
      // console.log("row--", row);
      let text = row.enable === 1 ? "启用" : "停用";
      this.$confirm('是否确认' + text + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口 改变状态值
          return getEnable(row.theid, row.enable);
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.enable = row.enable === 1 ? 1 : 0;
        });
    },
    changeRadio(val) {
      if (val == 0) {
        this.disflag = true;
      } else {
        this.disflag = false;
      }
    },
    submitPublish() {
      getPublish(this.formPublish).then((response) => {
        console.log(response);
        if (response.code === 200) {
          this.msgSuccess("发布成功");
          this.queryParams.releaseStatus = undefined;
          this.getList();
        }
      });
      this.openPublish = false;
      this.formPublish.reviewTime = "";
    },
    cancelPublish() {
      this.openPublish = false;
    },
    handleCourse(row) {
      // console.log("row", row);
      const theid = row.theid || this.ids;
      this.openCourse = true;
      this.CourseLoading = true;
      this.CourseDetails = [];
      getcourseData(theid).then((response) => {
        console.log(1111, response);
        this.formCourse = response.result;
        // this.CourseDetails = JSON.parse(response.result.resourceList);
        this.CourseDetails = response.result.resourceList;
        console.log(111, this.CourseDetails);
        this.CourseLoading = false;
      });
    },
    handleTeam(row) {
      // console.log("查看", row);
      this.crewOptions = [];
      // this.queryParams.theid = row.theid;
      this.peoplequeryParams.theid = row.theid;
      if (row.personnelNum == 0) {
        this.$message({
          message: "暂无人数",
          type: "warning",
          center: true,
        });
      } else {
        this.openTeam = true;
        this.loading2 = true;
        this.getCrews();
      }
    },
    getCrews() {
      getCrew(this.peoplequeryParams).then((response) => {
        // console.log("班组人员", response);
        this.ispeople = response.result.personnelType;
        let arr = this.crewOptions.concat(response.result.rows);
        this.crewOptions = this.unique(arr);
        this.crewtotal = response.result.total;
        this.loading2 = false;
      });
    },

    // 数组去重
    unique(arr) {
      // 利用对象访问属性的方法，判断对象中是否存在key
      var result = [];
      var obj = {};
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i].theid]) {
          result.push(arr[i]);
          obj[arr[i].theid] = true;
        }
      }
      return result;
    },
    // 考试名称 二维码弹框
    handleTest(row) {
      this.open6 = true;
      this.qrcode = row.examinationCode;
    },
    // 导出名单/成绩表
    handleExport() {},
    // 下载二维码
    downloadCodeImg() {
      // var alink = document.createElement("a");
      // alink.href =
      //   "http://data.aqykt.cn/storage/images/7/20211214/b645eff4946e6824ddce823ce66987cb.png";
      // alink.download = "pic"; //图片名
      // alink.click();
      // this.getUrlBase64(
      //   "http://data.aqykt.cn/storage/images/7/20211214/b645eff4946e6824ddce823ce66987cb.png"
      // ).then((base64) => {
      //   let link = document.createElement("a");
      //   link.href = base64;
      //   link.download = "qrCode.png";
      //   link.click();
      // });
      this.downloadIamge(
        "http://data.aqykt.cn/storage/images/7/20211214/b645eff4946e6824ddce823ce66987cb.png",
        "pic"
      );
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    getUrlBase64(url) {
      return new Promise((resolve) => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //允许跨域
        img.src = url;
        img.onload = function () {
          canvas.height = 300;
          canvas.width = 300;
          ctx.drawImage(img, 0, 0, 300, 300);
          let dataURL = canvas.toDataURL("image/png");
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    changeCate(val) {
      //培训分类
    },
    changeSpeaker(val) {
      //主讲人
      if (this.speakerOptions.length > 0) {
        this.form.speaker = val
          ? this.speakerOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    changeCourse(val) {
      //课程名称
      if (this.courseName.length > 0) {
        this.form.curriculum = val
          ? this.courseName.find((ele) => ele.theid === val).title
          : "";
      }
    },
    changeTeam(val) {
      //培训班组
      if (this.deptOptions.length > 0) {
        this.form.shift = val
          ? this.deptOptions.find((ele) => ele.theid === val).title
          : "";
        this.form.personnelNum = val
          ? this.deptOptions.find((ele) => ele.theid === val).personnelNum
          : "";
      }
    },
    changeType(val) {
      //培训类型
      if (this.cateOptions.length > 0) {
        this.form.typeVal = val
          ? this.cateOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    changeExamMode(val) {
      //考试分类
      if (this.examOptions.length > 0) {
        this.form.examMode = val
          ? this.examOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    changeExamName(val) {
      //考试名称
      if (this.TestNames.length > 0) {
        this.form.examTask = val
          ? this.TestNames.find((ele) => ele.theid === val).title
          : "";
      }
    },
    changeCate(val) {
      //培训分类
      if (this.cateOptions.length > 0) {
        this.form.typeVal = val
          ? this.cateOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    changePlan(val) {
      //培训计划
      if (this.trainPlan.length > 0) {
        this.form.trainingplan = val
          ? this.trainPlan.find((ele) => ele.theid === val).title
          : "";
      }
    },
    handleSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    changeDate(val) {
      if (val != null) {
        this.$set(this.form, "startTime", val[0]);
        this.$set(this.form, "endTime", val[1]);
      }
    },
  },
};
</script>

<style scoped lang="scss">
// /deep/
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
h3 {
  background: #f1e9c8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  margin-bottom: 10px;
  cursor: pointer;
}
/* .el-date-editor*/
/deep/ .el-dialog__body .el-date-editor.el-input,
/deep/ .el-dialog__body .el-date-editor.el-input__inner {
  // width: 220px;
  width: auto !important;
}
</style>